import {
  ForwardedRef,
  forwardRef,
  useImperativeHandle,
  useMemo,
  useRef,
  useState,
} from "react";
import { ComponentBaseProps } from "../../common-component/CommonTypes";
import { Tooltip } from "tdesign-react";
import { IotDeviceData } from "_common/DataType";
import image from "./iot-yg.png";
import "./IotYGComponent.less";
import classNames from "classnames";
import { ViewerState } from "components";

export interface IotYGComponentStyle {
  color?: string;
  fontSize?: number;
  fontWeight?: number;
  fontFamily?: string;
  alignItems?: string;
  justifyContent?: string;
  borderColor?: string;
  borderRadius?: number;
  backgroundColor?: string;
}

export interface DeviceProps {
  terminalId: string;
  deviceCode: string;
  position: string;
}

export interface IotYGComponentProps extends ComponentBaseProps {
  style?: IotYGComponentStyle;
  device?: DeviceProps;
  standardStore?: any;
}

export interface IotYGComponentRef {
  updateConfig: (newConfig: IotYGComponentProps) => void;
  setEventHandler: (eventMap: Record<string, Function>) => void;
  updateIotData?: (data: IotDeviceData) => void;
}

export const IotYGComponent = forwardRef(
  (props: IotYGComponentProps, ref: ForwardedRef<IotYGComponentRef>) => {
    const [config, setConfig] = useState<IotYGComponentProps>({
      ...props,
    });
    const { style, device } = config;
    const eventHandlerMap = useRef<Record<string, Function>>({});

    // 标准数据：烟感数据：value1: 0/1 0 正常，1 报警  value2: 电压
    const [data, setData] = useState<IotDeviceData>();
    // 是否报警

    useImperativeHandle(ref, () => ({
      updateConfig: (newConfig) => setConfig({ ...newConfig }),
      setEventHandler: (eventMap) => (eventHandlerMap.current = eventMap),
      updateIotData: (data) => {
        if (data.deviceCode == device?.deviceCode) {
          setData(data);
        }
      },
    }));

    // 是否报警
    const alarm = useMemo(() => {
      if (data?.status == 4) return false;
      return data?.value1 == 1;
    }, [data, device?.deviceCode]);

    // 是否离线
    const offline = useMemo(() => {
      if (!device?.deviceCode) return true;
      return data?.status == 4;
    }, [data, device?.deviceCode]);

    const tooltip = useMemo(() => {
      if (!device?.deviceCode)
        return <span className="text-red-500">未绑定设备</span>;
      return !device?.position
        ? `${device?.deviceCode}`
        : `${device?.deviceCode}-${device?.position}`;
    }, [device, device?.deviceCode, device?.position]);

    return (
      <div
        className="iot-yg-component flex flex-row justify-around border border-1 border-cyan-500 cursor-pointer items-center h-full"
        style={{
          borderWidth: 1,
          borderStyle: "solid",
          borderColor: style?.borderColor,
          borderRadius: style?.borderRadius,
          backgroundColor: style?.backgroundColor,
        }}
        onClick={() => {
          ViewerState.handleClick(device?.deviceCode);
        }}
      >
        <Tooltip content={tooltip}>
          <div className="left-img flex flex-col items-center">
            <img src={image} style={{ width: 50, height: 40 }} />
            <span className="text-cyan-500">无线烟感</span>
          </div>
        </Tooltip>
        <div className="radio flex flex-row items-center">
          <label className="switch2">
            <input type="radio" name="value-radio" />
            <Tooltip content={`绿灯亮：设备在线`}>
              <div className="button">
                <div className={classNames(!offline && "light")}></div>
                <div className="dots"></div>
              </div>
            </Tooltip>
          </label>
          <label className="switch">
            <input type="radio" name="value-radio" />
            <Tooltip content={`红灯亮：设备报警`}>
              <div className="button">
                <div className={classNames(alarm && "light")}></div>
                <div className="dots"></div>
              </div>
            </Tooltip>
          </label>
        </div>
      </div>
    );
  }
);

export default IotYGComponent;
